<template>
	<div>
		<div class="modifyin">修改个人信息</div>
		<ul>
			<li>
				<span class="fl">头像</span>
				<label for="">
					<img :src="tu">
					<input type="file" @change="touxiang">
				</label>
				<div class="clear"></div>
			</li>
			<li>
				<span>修改昵称</span>
				<input type="text" v-model="modifyusername">
			</li>
		</ul>
		<div class="tijiao" @click="modifyInformation">提交</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				modifyusername:'',
				id:'',
				access_token:'',
				target:'',
				tu:''
			}
		},
		mounted() {
			this.receive = JSON.parse(localStorage.getItem('userinfo'));
			this.id=this.receive.id;
			this.access_token=this.receive.access_token;
			this.modifyusername=this.receive.username;
		},
		methods:{
			modifyInformation:function(){
				console.log(this.modifyusername)
				this.$http.post('http://chonghekj.com/daily/index.php/Home/user/edit',this.$qs.stringify({
					id:this.id,
					access_token:this.access_token,
					username:this.modifyusername
				}))
				.then((res)=>{
					console.log(res)
					localStorage.setItem('userinfo',JSON.stringify({
						id:this.id,
						access_token:this.access_token,
						username:this.modifyusername
					}))
					this.$router.push({
						path:'/logindetail'
					})
				})
			},
			touxiang:function(e){
				console.log(e)
				this.id,
				this.access_token,
				this.target = e.target.files[0]
				let file = new FormData()
				file.append('file',this.target)
				file.append('id',this.id)
				file.append('access_token',this.access_token)
				
				this.$http.post('http://chonghekj.com/daily/index.php/Home/user/uploadAvatar',file,{
					'Content-Type':'multipart/form-data'
				})
				.then((res)=>{
					console.log(res)
					this.tu = 'http://chonghekj.com'+res.data.data
					
				})
			}
		}
	}
</script>

<style lang="less">
	.modifyin{
		width: 100%;
		height: 50px;
		background: #1989FA;
		line-height: 50px;
		color: #fff;
		text-align: center;
	}
	ul{
		li{
			padding: 16px;
			border-bottom: 1px solid #ddd;
			input{
				width: 160px;
				border: ;
				float: right;
				text-align: center;
			}
		}
	}
	.tijiao{
		width: 84%;
		height: 40px;
		margin: 0 auto;
		margin-top: 60px;
		border-radius: 20px;
		background: #1989FA;
		line-height: 40px;
		color: #fff;
		text-align: center;
	}
	label{
		width: 60px;
		height: 60px;
		img{
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}
	}
</style>
